﻿@{
    ViewBag.Title = "CountDownClock";
}

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="../../Content/examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../Scripts/jquery.countdown.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        var currentDate = new Date(),
            finished = false,
            availiableExamples = {
                set15daysFromNow: 27 * 24 * 60 * 60 * 1000,
                set5minFromNow: 5 * 60 * 1000,
                set1minFromNow: 1 * 60 * 1000
            };

        function callback(event) {
            $this = $(this);
            switch (event.type) {
                case "seconds":
                case "minutes":
                case "hours":
                case "days":
                case "weeks":
                case "daysLeft":
                    $this.find('span#' + event.type).html(event.value);
                    if (finished) {
                        $this.fadeTo(0, 1);
                        finished = false;
                    }
                    break;
                case "finished":
                    $this.fadeTo('slow', .5);
                    finished = true;
                    break;
            }
        }

        $('div#clock').countdown(availiableExamples.set15daysFromNow + currentDate.valueOf(), callback);
    });
  </script>

 <div id="container">
    <h1>City Boards Web site launch count down...</h1>
    <p>
      Our new home is undercontruction, we will be live on the 19th April 2013.
    </p>
<!-- HTML -->
<div id="clock">
  <p>
    <span id="weeks"></span>
    Weeks
  </p>
  <div class="space">:</div>
  <p>
    <span id="daysLeft"></span>
    Days
  </p>
  <div class="space">:</div>
  <p>
    <span id="hours"></span>
    Hours
  </p>
  <div class="space">:</div>
  <p>
    <span id="minutes"></span>
    Minutes
  </p>
  <div class="space">:</div>
  <p>
    <span id="seconds"></span>
    Seconds
  </p>
</div>
</div>
    